<script setup>

import {User, Wallet} from "@element-plus/icons-vue";
import ConnectWallet from "@/components/NFT/ConnectWallet.vue";
import {useStore} from "@/store";
import LightCard from "@/components/LightCard.vue";
import Card from "@/components/Card.vue";
import {ElNotification} from "element-plus";
import {h} from "vue";
const store = useStore()

function init(){
  if (!store.wallet.connected){
    ElNotification({
      title: '注意',
      message: h('i', { style: 'color: teal' }, '查看相关内容前，请先连接小狐狸钱包!'),
    })
  }
}
init()


</script>

<template>
  <card :icon="Wallet"
        title="账户状态">
    <connect-wallet/>
    <div v-if="store.wallet.connected">
      <div style="margin-top: 20px;text-align: center">
        <p>
          账户地址:
          {{store.wallet.address.slice(0,4) + '...'+store.wallet.address.slice(-4)}}
        </p>
        <p>
          账户余额：
          {{store.wallet.cusdt}} CUDT
        </p>
      </div>
    </div>
  </card>

</template>

<style scoped>

</style>